<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">
                <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"
                    show-scrollbar="false">
                    <view class="popup-main">
                        <view style="display: flex; justify-content: space-between;">
                            <view class="popupTitle"> {{ title }}</view>
                            <van-icon name="cross" size="15" @click="closePopup" />
                        </view>
                        <!-- 服务信息 -->
                        <view class="serviceNode">
                            <view class="service-timeline" style="margin-top: 30rpx;">
                                <view v-for="(item, index) in steps" :key="index"
                                    :class="['timeline-item', index === (steps.length - 1) ? 'last-item' : '']">
                                    <view :class="[index === 0 ? 'timeline-dot-active' : 'timeline-dot']"></view>
                                    <view
                                        :class="['timeline-line', index === (steps.length - 1) ? 'last-item-timeline-line' : '', index === 0 ? 'timeline-line-active' : '']"
                                        :style="index === 0 ? 'height: calc(100% - 12rpx)' : 'height: 100%'"></view>
                                    <view class="timeline-content" :id="'timeline_content' + index">
                                        <h3 :class="['timeline-text', index === 0 ? 'timeline-text-active' : '']">{{ item.remark? item.remark : (item.changeType=='distribute'?'分配中':'')}}</h3>
                                        <p class="timeline-desc">{{ item.desc }}</p>
                                        <p class="timeline-time">{{ item.changeTime }}</p>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </scroll-view>

            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import {reservationProcessApi} from '@/api/staff'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        reservationId:{
            type: String,
            default: ''
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            showMark: true, // 标记
            title: '服务节点',
            option: {},
            steps: [
                {
                    text: '服务完成',
                    // desc:'服务人员王涛（15632642154）已服务',
                    time: '2021-12-21 14:30',
                },
                {
                    text: '服务中',
                    // desc: '社区家政服务公司（0359-2365235）派单给服务人员王涛（15632642154）',
                    time: '2021-12-21 14:30'
                },
                {
                    text: '等待服务',
                    // desc: '服务人员王涛（15632642154）已服务',
                    time: '2021-12-21 14:30'
                },
                {
                    text: '服务已创建',
                    time: '2021-12-21 14:30'
                }
            ],
            active:0,
            activeIndex:0,
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            timeline_line:'',
            timelineLinesHeight: []
        }
    },

    computed: {
    },


    watch: {
        show: {
            immediate: true, // 初始化时也执行一次
            handler(newVal) {
                console.log('弹窗显示状态变化:', newVal);
                if (newVal) {
                    this.getReservationProcess()
                    // 当弹窗显示时执行原 onReady 中的逻辑
                    this.$nextTick(() => {
                        if (this.steps.length > 0) {
                            // this.steps = [...this.steps].reverse(); // 创建副本避免修改原始数据
                            const updatePromises = [];
                            this.steps.forEach((item, index) => {
                                updatePromises.push(this.setTimelineLineHeight(index));
                            })
                            Promise.all(updatePromises).then(() => {
                                console.log('所有竖线高度更新完成');
                            });
                        }
                    });
                }
            },

        }
    },
    onLoad () {
        if (this.house===0) {
            // this.title = '商品排序'
        } else{
            // this.title = '全部分类'
        }
      
    },
    onReady() {
        // if (this.steps.length > 0) {
        //     // this.steps = this.steps.reverse(); // 反转数组
        //     const updatePromises = [];
        //     this.steps.forEach((item, index) => {
        //         updatePromises.push(this.setTimelineLineHeight(index));
        //     })
        //     Promise.all(updatePromises).then(() => {
        //         // 在这里可以添加一些依赖于高度都更新完成后的逻辑，比如检查视图是否正确显示高度等
        //         console.log('所有竖线高度更新完成');
        //     });
        // }
    },

    methods: {
  
        // 关闭弹窗
        closePopup () {
            console.log('关闭 关闭关闭---------')
            this.$emit('closeNodePopup')
        },
        // 流程图左侧的竖线
        getItemHeight(index) {
            return new Promise((resolve) => {
                const query = wx.createSelectorQuery().in(this);
                query.select(`#timeline_content${index}`).boundingClientRect((rect) => {
                    console.log(rect, 'rect')
                    const contentHeight = rect.height;
                    resolve(contentHeight + 20);
                }).exec();
            });
        },
        // async setTimelineLineHeight(index) {
        //     const height = await this.getItemHeight(index);
        //     console.log(height, 'kkkll')
        //     this.timelineLinesHeight[index] = height + 'px'
        //     console.log(this.timelineLinesHeight)
        //     this.$forceUpdate()
        //     // return new Promise((resolve) => {
        //     //     // 可以简单地通过 setTimeout 模拟等待视图更新完成，实际可能需要更精准的判断机制
        //     //     setTimeout(() => {
        //     //         resolve();
        //     //     }, 0);
        //     // });
        // }
        async setTimelineLineHeight(index) {
            const query = wx.createSelectorQuery().in(this);
            // 添加异常处理
            try {
                const rect = await new Promise((resolve) => {
                    query.select(`#timeline_content${index}`).boundingClientRect(resolve).exec();
                });

                if (rect && rect.height) {
                    this.$set(this.timelineLinesHeight, index, rect.height + 20 + 'px');
                }
            } catch (e) {
                console.error('高度获取失败:', e);
            }
        },
        getReservationProcess(){
            reservationProcessApi({
                reservationId:this.reservationId
            }).then(res=>{
                if(res.code===200){
                    this.steps = res.data
                }
            })
        }

  },

}
</script>
<style lang="scss" scoped>

::v-deep .van-button__text {
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding:24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    // height: 50%;


    .popup-main {
        // height: 100%
        height:calc(100% - (144rpx + env(safe-area-inset-bottom)));
        padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }

}
.service-timeline {
//   margin-top: 40rpx;
  padding-left: 30rpx;
}

.timeline-item {
  position: relative;
  padding-bottom: 40rpx;
}
// 左侧的点
.timeline-dot {
  position: absolute;
  left: -9rpx;
  top: 7rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #d4d4d4;
}
// 左侧第一个点
.timeline-dot-active{
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/processDot.png') no-repeat;
    background-size: 100%;
}
// 左侧active点
.active .timeline-dot {
  background-color: #ff6023;
}

// 左侧的竖线
.timeline-line {
  position: absolute;
  left:0px;
  top: 24rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #ccc;
  min-height: 80rpx; /* 防止高度为0的情况 */
  transition: height 0.3s; /* 添加过渡效果 */
}
.timeline-line-active{
    background-color: #ff6023;
}

.timeline-content {
  margin-left: 30rpx;
}
.timeline-text{
    font-size: 32rpx;
    line-height: 32rpx;
    color: #333333;
    // font-weight: bolder;
}
.timeline-text-active{
    color: #ff6023;
}
.timeline-desc{
    font-size: 24rpx;
    color: #111111;
    margin-top: 28rpx;
}
.timeline-time {
  color: #999999;
  font-size: 24rpx;
  line-height: 24rpx;
  margin-top: 10rpx;
}
.last-item.timeline-line {
  display: none;
}
.last-item-timeline-line{
    height: 0rpx;
    display: none !important;
}
::v-deep .desc-class{
    font-size: 24rpx !important;
    line-height: 24rpx;
    text-align: left;
    color: #111111 !important;
}


</style>

